<template>
  <!-- <div>题目预览</div> -->
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    width="800px"
    @close="handleClose"
  >
    <!-- <span>这是一段信息</span> -->
    <!-- 第一行 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <span v-if="items.questionType === '1'">【题型】：单选题</span>
        <span v-else-if="items.questionType === '2'">【题型】：多选题</span>
        <span v-else>【题型】：简答题</span>
      </el-col>
      <el-col :span="6">【编号】:{{ items.id }}</el-col>
      <el-col :span="6">
        <span v-if="items.difficulty === '1'">【难度】：简单</span>
        <span v-else-if="items.difficulty === '2'">【难度】：一般</span>
        <span v-else>【难度】：困难</span>
      </el-col>
      <el-col :span="6">【标签】:{{ items.tags }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">【学科】:{{ items.subjectName }}</el-col>
      <el-col :span="6">【目录】:{{ items.directoryName }}</el-col>
      <el-col :span="6">【方向】:{{ items.direction }}</el-col>
    </el-row>
    <hr />

    <!-- 第二行 -->
    <el-row>
      <el-col
        >【题干】:
        <span v-html="items.question" style="color: #1111ff"></span>
        <div>
          <span v-if="items.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="items.questionType === '2'">【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>选项（以下选中的选项为正确答案）
        </div>
        <!-- 单选 -->

        <el-radio-group
          v-model="radio"
          v-if="items.questionType === '1'"
          @change="change"
        >
          <el-row
            v-for="(item, index) in items.options"
            :key="index"
            style="margin: 10px 0px"
          >
            <el-radio :label="item.isRight">{{ item.title }}</el-radio>
          </el-row>
        </el-radio-group>

        <!-- 多选 -->
        <div v-if="items.questionType === '2'">
          <el-row
            style="margin: 10px 0px"
            v-for="(item, index) in options"
            :key="index"
          >
            <el-checkbox
              :checked="item.isRight === true"

              @change="testChange(item)"
              onclick="return false"
            >
              {{ item.title }}
            </el-checkbox>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <hr />

    <!-- 第三行 -->
    <el-row>
      <el-col>
        <div>
          【参考答案】:<el-button
            type="danger"
            size="small"
            style="margin-left: 10px"
            @click="flag = !flag"
            >视频答案预览</el-button
          >
        </div>
        <div><video :src="items.videoURL" controls v-if="flag"></video></div>
      </el-col>
    </el-row>
    <hr />

    <!-- 第四行 -->
    <el-row>
      <el-col>
        <!-- <a
          target="_blank"
          href="https://element.eleme.cn/#/zh-CN/component/installation"
          > -->
        【答案解析】:<span
          v-text="items.answer && items.answer.replace(/<[^>]+>/g, '')"
        ></span>
        <!-- </a> -->
      </el-col>
    </el-row>
    <hr />

    <!-- 第五行 -->
    <el-row>
      <!-- <a
        target="_blank"
        href="https://element.eleme.cn/#/zh-CN/component/installation"
      > -->
      <el-col>【题目备注】:{{ items.remarks }}</el-col>
      <!-- </a> -->
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </el-row>
    </span>
  </el-dialog>
</template>

<script>
// 精选题库列表

import { detail } from '@/api/hmmm/questions'
// 题型，难度
// import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
    // tableData: {
    //   type: Array
    // }
  },
  data () {
    return {
      items: {},
      flag: false,
      radio: 1
    }
  },
  // created () {
  //   this.detailList()
  // },
  methods: {
    // 关闭
    handleClose () {
      // console.log(1)
      this.$emit('handleClose')
      // this.items = {}
    },
    // 精选题库列表渲染
    async detailList (id) {
      console.log(id)
      const { data } = await detail({ id })
      // console.log(data)
      this.items = data
    },
    // 单选框
    change () {
      // this.radio = 1
    },
    //  多选框的change事件
    testChange (item) {
      if (item.isRight) {
        console.log(item.isRight)
      } else {
        item.isRight = true
      }
    }
  },
  computed: {
    options () {
      // 先判断是不是多选题
      if (this.items.questionType === '2') {
        if (!this.items.options) {
          return // 如果没有题目选项停止后续操作
        }
        // 遍历传递过来的题目选项 如果isRight===1 代表该选项是被选中的选项
        this.items.options.forEach(element => {
          if (element.isRight === 1) {
            // 将这一项的isRight改为true 多选框就会默认选择
            element.isRight = true
          }
        })
        // 修改完成之后
        return this.items.options
      } else {
        // 如果不是单选题 原路返回传递过来的题目项
        return this.items.options
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
